<template>
  <div>
    <br>
    <el-form :inline = "true">
      <el-form-item label="订单号">
        <el-input v-model="searchMap.orderId"/>
      </el-form-item>
      <template>
        <el-select v-model="searchMap.state" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </template>
      <el-button type="text" @click="searchData()">查询</el-button>
      <el-button type="text" @click="handleEdit('')">新增</el-button>
    </el-form>
    <br>
    <el-table
      :data="list"
      border
      style="padding-left: 50;min-width: 100%;">
      <el-table-column
        fixed
        label="操作"
        min-width="7.69%">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          <el-button type="text" size="small" @click="handleUpdateState(scope.row.id)">审核</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        min-width="7.69%"/>
      <el-table-column
        prop="orderId"
        label="订单号"
        min-width="7.69%"/>
      <el-table-column
        prop="creatTime"
        label="订单时间"
        min-width="7.69%"/>
      <el-table-column
        prop="rootname"
        label="合成物/拆分物名字"
        min-width="7.69%"/>
      <el-table-column
        prop="portion"
        label="合成/拆分份数"
        min-width="7.69%"/>
      <el-table-column
        prop="warehouse"
        label="工作仓库"
        min-width="7.69%"/>
      <el-table-column
        prop="proposer"
        label="申请人"
        min-width="7.69%"/>
      <el-table-column
        prop="assessor"
        label="审核员"
        min-width="7.69%"/>
      <el-table-column
        prop="remark"
        label="备注"
        min-width="7.69%"/>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10,20,30]"
      :page-size="10"
      :total="total"
      layout="total,sizes,prev,pager,next,jumper"
      @szie-change="fetchData"
      @current-change="fetchData"/>

    <el-dialog
      :visible.sync="dialogVisible"
      title="加工表"
      width="30%">
      <el-form label-width="100PX">
        <el-form-item label="合成物/拆分物名字">
          <el-select v-model="processCompound.rootid" placeholder="请选择" @change="setCompoundName()">
            <el-option
              v-for="item in option"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="加工份数">
          <el-input v-model="processCompound.portion"/>
        </el-form-item>
        <el-form-item label="工作仓库">
          <el-select v-model="processCompound.warehouseId" placeholder="请选择" @change="setCompoundHouse()">
            <el-option
              v-for="item in optionH"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input v-model="processCompound.proposer"/>
        </el-form-item>
        <el-form-item label="审核员">
          <el-input v-model="processCompound.assessor"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            :rows="3"
            v-model="processCompound.remark"
            type="textarea"
            placeholder="请输入备注信息"/>
        </el-form-item>
      </el-form>
      <span/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import processCompoundApi from '@/api/processCompound'
import processBomApi from '@/api/processBom'
import stockhouseApi from '@/api/stockhouse'
export default{
  data() {
    return {
      list: [],
      total: 0,			// 总记录数
      currentPage: 1,		// 当前页
      pageSize: 10,		// 每页大小
      searchMap: {'type':'加工'},		// 查询条件D
      dialogVisible: false, // 对话框是否可见
      id: '',
      type: '加工',
      state: '',
      option: [],
      optionH: [],
      processCompound: { 'type': '加工' },
      options: [{
        value: '已审核',
        label: '已审核'
      }, {
        value: '未审核',
        label: '未审核'
      }]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      processCompoundApi.findAllByType(this.type, this.currentPage, this.pageSize).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
      })
    },
    searchData() {
      processCompoundApi.search(this.searchMap, this.currentPage, this.pageSize).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
      })
    },
    handleDelete(id) {
      processCompoundApi.deleteById(id).then(response => {
        this.$message({
          message: response.message,
          type: 'success'
        })
        if (response.flag) {
          this.fetchData()
        }
      })
    },
    handleSave() {
      processCompoundApi.update(this.id, this.processCompound).then(response => {
        this.$message({
          message: response.message,
          type: 'success'
        })
        if (response.flag) {
          this.fetchData()
        }
      })
      this.dialogVisible = false
    },
    handleEdit(id) {
      this.dialogVisible = true
      this.id = id
      processBomApi.findAllBom().then(response => {
        this.option = response.data
      })
      stockhouseApi.findAll().then(response => {
        this.optionH = response.data
      })
      if (id === '' || id === null) {
        this.processCompound = { 'type': '加工', 'state': '未审核' }
      } else {
        processCompoundApi.findById(this.id).then(response => {
          this.processCompound = response.data
        })
      }
    },
    handleUpdateState(id) {
      processCompoundApi.updateState(id).then(response => {
        this.$message({
          message: response.message,
          type: '审核成功：已审核'
        })
        if (response.flag) {
          this.fetchData()
        }
      })
    },
    setCompoundName() {
      for (let i = 0; i < this.option.length; i++) {
        if (this.option[i].id === this.processCompound.rootid) {
          this.processCompound.rootname = this.option[i].name
        }
      }
    },
    setCompoundHouse() {
      for (let i = 0; i < this.optionH.length; i++) {
        if (this.optionH[i].id === this.processCompound.warehouseId) {
          this.processCompound.warehouse = this.optionH[i].name
        }
      }
    }
  }
}
</script>

<style>
</style>
